<template>
  <div>
    <!-- 押金 -->
    <el-dialog
      v-el-drag-dialog
      title="押金明细"
      :visible.sync="visible"
      width="1024px"
      @close="reset"
    >
      <!-- 客户信息 -->
      <div class="item">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">客户信息</span>
        </div>
        <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
          <el-form-item label-width="0">
            <el-input v-model="temp.csmPhone" placeholder="请输入">
              <el-select slot="prepend" v-model="temp.select" style="width: 100px;" placeholder="请选择">
                <el-option label="客户电话" :value="1" />
                <el-option label="客户名称" :value="2" />
                <el-option label="客户编码" :value="3" />
              </el-select>
              <el-button slot="append" class="append-search">查询</el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
          <el-form-item label="客户编号" prop="csmRgPhone">
            <el-input v-model="temp.csmRgPhone" />
          </el-form-item>
          <el-form-item label="名称" prop="contact">
            <el-input v-model="temp.contact" />
          </el-form-item>
          <el-form-item label="身份证号" prop="contact">
            <el-input v-model="temp.contact" />
          </el-form-item>
          <el-form-item label="联系电话" prop="csmRgPhone">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系地址" prop="contact" style="width: 66%;">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 押金信息 -->
      <div class="item">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">押金信息</span>
        </div>
        <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
          <el-form-item label="客户编号" prop="csmCode">
            <el-input v-model="temp.csmCode" placeholder="" clearable>
              <el-button slot="append" class="append-search">获取</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="押瓶机构" prop="csmRgPhone">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
          <el-form-item label="收款人" prop="csmRgPhone">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" prop="sfzh">
            <el-input v-model="temp.sfzh" />
          </el-form-item>
          <el-form-item label="收款方式" prop="csmRgPhone">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
          <el-form-item label="手续费" prop="csmRgPhone">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
          <el-form-item label="收据单号" prop="sfzh" style="width: 66%;">
            <el-input v-model="temp.sfzh" />
          </el-form-item>
          <el-form-item label="支付方式" prop="contact">
            <el-select v-model="temp.csmStatus" placeholder="请选择">
              <el-option :value="1" label="未审核" />
              <el-option :value="2" label="已审核" />
              <el-option :value="3" label="已挂失" />
            </el-select>
          </el-form-item>
          <el-form-item prop="remark" class="block">
            <label slot="label">备&emsp;&emsp;注</label>
            <el-input v-model="temp.remark" type="textarea" :rows="3" maxlength="255" show-word-limit />
          </el-form-item>
        </el-form>
      </div>
      <!-- 押瓶信息 -->
      <div class="item">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">客户信息</span>
        </div>
        <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
          <el-form-item label="规格型号" prop="area" style="width: 70%;">
            <el-cascader v-if="visible" ref="cascader" v-model="temp.area" style="width: 40%;" clearable />
            <el-button type="primary" style="width: 70px;" size="mini" @click="add">添加</el-button>
          </el-form-item>
          <el-form class="card" style="width: 96%;">
            <el-card style="margin-bottom: 20px;">
              <el-form label-width="80px" class="form">
                <el-form-item label="规格型号">
                  15KG
                </el-form-item>
                <el-form-item label="数量">
                  <el-input-number v-model="num" :min="1" :max="10" label="描述文字" @change="handleChangeNum" />
                </el-form-item>
                <el-form-item label="租金">
                  <el-input v-model="temp.sfzh" style="width: 80px;" /> 元 / 个
                </el-form-item>
                <el-form-item label="押金">
                  <el-input v-model="temp.sfzh" style="width: 80px;" /> 元 / 个
                </el-form-item>
                <el-form-item label="押金合计" style="width: 66%;">
                  100
                </el-form-item>
                <el-form-item label="气瓶号" style="width: 80%;">
                  <el-tag
                    v-for="(tag,index) in dynamicTags"
                    :key="index"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>

                  <el-input
                    ref="saveTagInput"
                    v-model="inputValue"
                    class="input-new-tag"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  />

                  <!-- <el-button class="button-new-tag" size="mini" type="primary" style="" @click="showInput">添加</el-button> -->
                </el-form-item>
              </el-form>
            </el-card>
            <el-button type="danger" icon="el-icon-delete" />
          </el-form>
          <el-form-item label="附件上传">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList"
            >
              <el-button icon="el-icon-upload2" size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <span class="deposit">押金总计：￥200.00</span>
        <el-checkbox v-model="checked" class="depositForm">每个气瓶生成单独的押金单</el-checkbox>
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" @click="visible = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'register',
    data() {
      return {
        dynamicTags: ['123', '456', '789'],
        inputVisible: false,
        inputValue: '',
        visible: false,
        qtype: 1,
        txt: '',
        checked: 1,
        fileList: [],
        num: 1,
        temp: {
          csmPhone: '',
          select: 1,
          csmStatus: 1,
          area: [],
          csmName: '',
          csmCode: '',
          csmType: 1,
          gasNature: '',
          csmRgPhone: '',
          contact: '',
          orgName: '',
          csmFloor: 1,
          unCheckQuality: '',
          sfzh: '',
          sfzName: '',
          sfzAddress: '',
          cardType: '',
          cardNo: '',
          newType: 2,
          defaultPaymentMethod: 1,
          newFrom: 8,
          salesmanName: '',
          isPickUp: 0,
          settlementType: 1,
          createTime: '',
          contractNumber: '',
          decimalSpare1: '',
          intSpare2: '',
          strSpare1: '',
          strSpare2: '',
          strSpare3: '',
          strSpare4: ''
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
          }
        })
      },
      reset() {

      },
      add() {

      },
      handleClose() {
        this.dynamicTags.splice(this.dynamicTags.indexOf(), 1)
      },
      showInput() {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },
      handleInputConfirm() {
        const inputValue = this.inputValue
        if (inputValue) {
          this.dynamicTags.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3)
      },
      handleChangeNum(value) {
        console.log(value)
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 20px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
    .content {
      margin-bottom: 0;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }

  .card {
    position: relative;

    .el-button {
      position: absolute;
      top: 0;
      right: -44px;
      width: 44px;
      height: 40px;
    }
  }
}

.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}

.dialog-footer {
  .deposit {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    font-weight: 700;
    color: #F26A24;
  }

  .depositForm {
    float: left;
    margin-left: 160px;
    font-size: 14px;
    color: #01999F;
  }
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  // height: 32px;
  // line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 10px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
